<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息录入</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- css -->
    <style>
        #exampleInputAmount {
            width: 200px;
        }

        .form-inline {
            margin-bottom: 15px;
        }

        table tr th {
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="container">
        <!--  -->

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">信息录入</h3>
            </div>
            <div class="panel-body">
                <!--  -->

                <!-- <form action="" method="POST" role="form"> -->
                <legend>信息录入</legend>

                <div class="form-group">
                    <label for="">姓名</label>
                    <input type="text" class="form-control" placeholder="请输入姓名" id="name">
                </div>
                <div class="form-group">
                    <label for="">年龄</label>
                    <input type="text" class="form-control" placeholder="请输入年龄" id="age">
                </div>
                <div class="form-group">
                    <label for="">技能</label>
                    <textarea type="text" class="form-control" placeholder="请输入技能" id="edu"></textarea>
                </div>
                <div class="form-group">
                    <label for="">头像</label>
                    <input type="text" class="form-control" placeholder="请输入头像地址" id="img">
                </div>


                <button type="submit" class="btn btn-primary btn-block" onclick="btnSave()">提交</button>
                <!-- </form> -->


            </div>
        </div>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        function btnSave() {
            var name = document.querySelector('#name').value;
            // console.log(imgTxt);
            var age = document.querySelector('#age').value;
            var edu = document.querySelector('#edu').value;
            var img = document.querySelector('#img').value;

            if (name && age && edu && img) {
                // .post发送post请求
                //    参数一 表示地址
                //    参数二 表示传递的数据
                axios.post('/api/v1/pets', {
                    name,
                    age,
                    edu,
                    img,
                }).then(res => {
                    console.log(res);
                    alert('添加成功');
                    window.location.href = "./index.html";
                });
            } else {
                alert('请填写完整');
            }

        }
    </script>
</body>

</html>